<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="交纳保证金"
      left-arrow
      @click-left="back"
    />
    <div class="tips">
      <div>* 未交纳服务保证金将无法获得抢单任务，同时也无法发布自有房源</div>
      <div>* 如未有服务在进行 保证金可随时退还</div>
    </div>
    <div class="cell">
      <div>保证金金额</div>
      <div v-show="agent.cashDeposit == 2">已交纳</div>
      <div v-show="agent.cashDeposit == 1">￥{{ paylist.total }}元</div>
    </div>
    <div v-show="agent.cashDeposit == 2" class="cell">
      <div>保证金退款</div>
      <div class="gobtn" @click="backmoney">去退款</div>
    </div>
    <!-- <div class="tipwords">支付方式</div>
    <div class="way">
      <div class="part1">
        <div style="flex: 1">
          <div class="part3">
            <van-icon size="40px" name="wechat-pay" />
            <div>微信</div>
          </div>
          <div class="part3">
            <van-icon size="40px" name="alipay" />
            <div>支付宝</div>
          </div>
        </div>
        <van-radio-group v-model="radio">
          <van-radio
            icon-size="24px"
            checked-color="#45b7cb"
            name="1"
          ></van-radio>
          <van-radio
            icon-size="24px"
            checked-color="#45b7cb"
            name="2"
          ></van-radio>
        </van-radio-group>
      </div>
    </div> -->
    <div v-show="agent.cashDeposit == 1" class="btnpart">
      <div class="cheak">
        <van-checkbox
          shape="square"
          icon-size="14px"
          checked-color="#45b7cb"
          v-model="checked"
        ></van-checkbox>
        <span style="margin-left: 3px"
          >我已阅读并同意<span @click="toagreement" class="xy"
            >《经纪人会员服务协议》</span
          ></span
        >
      </div>
      <button @click="give">交纳保证金</button>
      <div class="safe"></div>
    </div>
    <van-overlay z-index="200" :show="show">
      <div class="wrapper">
        <div class="paysuccess">
          <van-icon size="70px" name="checked" />
          <div>
            交纳成功，<span>{{ time }}</span
            >秒后自动跳转
          </div>
          <button @click="back">跳转</button>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { getUserInfo } from "../../apis/user.js";
import { getPay, createPayorder, paySign } from "../../apis/buy.js";
import local from "../../utils/local.js";
export default {
  data() {
    return {
      timer: "",
      time: 3,
      checked: false,
      radio: 1,
      show: false,
      paylist: {},
      agent: {},
      wxChannel: null,
    };
  },
  created() {
    if (window.plus) {
      setTimeout(this.plusReady, 0);
    } else {
      document.addEventListener("plusready", this.plusReady, false);
    }
    this.getInfo();
    getPay({ cate: "1", type: "2" }).then((response) => {
      this.paylist = response.result.list[0];
    });
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    toagreement() {
      this.$router.push({ path: "/agentagreement" });
    },
    getInfo() {
      getUserInfo({ userId: local.get("userId") }).then((res) => {
        local.set("userInfo", JSON.stringify(res.result));
        this.agent = res.result.agent;
      });
    },
    backmoney() {
      window.location.href = "tel:400-000-7173";
    },
    give() {
      let _this = this;
      if (this.checked) {
        createPayorder({ serveId: this.paylist.serveId }).then((res) => {
          if (res.code == 201) {
            let orderid = res.result.orderId;
            paySign({ type: "1", orderId: orderid }).then((rep) => {
              console.log(rep);
              if (rep.code == 201) {
                plus.payment.request(
                  _this.wxChannel,
                  JSON.stringify(rep.result),
                  function (result) {
                    console.log(result);
                    _this.show = true;
                    _this.timer = setInterval(() => {
                      _this.time--;
                      if (_this.time == 0) {
                        _this.$router.go(-1);
                        clearInterval(_this.timer);
                      }
                    }, 1000);
                  },
                  function () {
                    _this.$toast("支付失败");
                  }
                );
              } else {
                _this.$toast("下单失败");
              }
            });
          } else {
            _this.$toast("下单失败");
          }
        });
      } else {
        this.$toast("请阅读并勾选下方协议");
      }
    },
    plusReady() {
      let _this = this;
      plus.payment.getChannels((channels) => {
        for (let i in channels) {
          if (channels[i].id == "wxpay") {
            _this.wxChannel = channels[i];
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.tips {
  background-color: #f8f8f8;
  font-size: 13px;
  color: #999;
  padding: 15px;
}
.cell {
  color: #333;
  display: flex;
  margin: 15px 0;
  padding: 15px;
  justify-content: space-between;
  align-items: center;
}
.gobtn {
  color: #fff;
  font-size: 14px;
  background-color: #45b7cb;
  padding: 5px 15px;
  border-radius: 15px;
}
.tipwords {
  padding: 15px;
  font-size: 18px;
  color: #333;
  font-weight: bold;
}
.way {
  margin: 0 15px;
  .part1 {
    display: flex;
    .part3 {
      display: flex;
      &:first-child {
        .van-icon {
          color: #00cc00 !important;
        }
      }
      &:last-child {
        .van-icon {
          color: #2c97fa;
        }
      }
      div {
        padding-top: 10px;
        margin-left: 10px;
      }
    }
    .van-radio-group {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.paysuccess {
  padding: 25px 40px;
  background-color: #fff;
  text-align: center;
  color: #45b7cb;
  > div {
    margin-top: 10px;
    color: #333;
    span {
      color: #45b7cb;
    }
  }
  button {
    margin-top: 15px;
    background-color: #fff;
    border: 1px solid #45b7cb;
    padding: 3px 15px;
    border-radius: 15px;
  }
}
.btnpart {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 100;
  padding: 10px 0;
  border-top: 1px solid #f1f1f1;
  background-color: #fff;
  text-align: center;
  .cheak {
    padding-bottom: 5px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 15px;
    font-size: 11px;
    color: #333;
    .xy {
      color: #45b7cb;
    }
  }
  button {
    border: none;
    border-radius: 20px;
    height: 40px;
    width: 90%;
    color: #fff;
    background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
  }
  .safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style>